<template>
  <div v-loading="loading">
    <el-divider />
    <el-row>
      <el-col :span="12">
        <el-form-item label="任务名称" prop="taskName">
          <el-input
            v-model="form.taskName"
            :disabled="form.isHiddenValu"
            placeholder="请输入任务名称"
            style="width: 204px"
          />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="迁移类型" prop="migrationType">
          <el-select v-model="form.migrationType" :disabled="form.isHiddenValu" placeholder="请选择迁移类型" clearable filterable @change="changeMigrationType">
            <el-option
              v-for="item in migrationTypeList"
              :key="item.name"
              :label="item.name"
              :value="item.name"
              :disabled="!item.enabled"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <!-- <el-col :span="12">
        <el-form-item label="表选择方式" prop="tableSelectType">
          <el-radio-group v-model="form.tableSelectType" :disabled="form.isHiddenValu">
            <el-radio-button label="直连">直连</el-radio-button>
            <el-radio-button label="导入">导入</el-radio-button>
          </el-radio-group>
        </el-form-item>
      </el-col> -->
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label="数据迁移方式" prop="transferType">
          <el-radio-group v-model="form.transferType" :disabled="form.isHiddenValu" @input="tranferTypeChange">
            <el-radio-button label="ExpandNum">直连载数</el-radio-button>
            <el-radio-button label="TextLoad">文本载数</el-radio-button>
            <el-radio-button label="UnloadText">文本卸数</el-radio-button>
          </el-radio-group>
        </el-form-item>
      </el-col>

      <el-col v-if="form.transferType === 'ExpandNum'" :span="12">
        <el-form-item label="是否数据分析" prop="isDataAnalysis">
          <el-checkbox v-model="form.isDataAnalysis" :disabled="form.isHiddenValu" true-label="Y" fales="N" />
        </el-form-item>
      </el-col>

      <el-col v-if="form.transferType === 'TextLoad' || form.transferType === 'UnloadText'" :span="12">
        <el-form-item label="文本服务器" prop="textSourceConnPkId">
          <el-select v-model="form.textSourceConnPkId" clearable filterable :disabled="form.isHiddenValu" placeholder="请选择">
            <el-option
              v-for="item in textSourceConnList"
              :key="item.pkId"
              :label="item.sourceName"
              :value="item.pkId"
            />
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row v-if="form.tableSelectType === '直连'">
      <el-col :span="12">
        <el-form-item label="服务器名称" prop="sourceConnPkId">
          <el-select v-model="form.sourceConnPkId" clearable filterable :disabled="form.isHiddenValu" placeholder="请选择" @change="dataSourceConnChange">
            <el-option
              v-for="item in sourceConnList"
              :key="item.pkId"
              :label="item.sourceName"
              :value="item.pkId"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="数据库名称" prop="database">
          <el-select v-model="form.database" clearable filterable :disabled="form.isHiddenValu" placeholder="请选择">
            <el-option v-for="database in sourceDatabaseList" :key="database" :label="database" :value="database" />
          </el-select>
        </el-form-item>
        <el-button
          v-if="form.transferType === 'ExpandNum'"
          style="margin-left: 25px;"
          class="bordered-button"
          :disabled="form.sourceConnPkId === null || form.database === null"
          size="medium"
          type="text"
          @click="showScripList"
        >选择需要数据迁移的表
        </el-button>

        <el-button
          v-if="form.transferType === 'TextLoad' || form.transferType === 'UnloadText'"
          style="margin-left: 25px;"
          class="bordered-button"
          :disabled="form.sourceConnPkId === null || form.database === null"
          size="medium"
          type="text"
          @click="showAllTableList"
        >展示表清单
        </el-button>

      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label="日期选择" prop="dataSyncType">
          <el-radio-group v-model="form.dataSyncType" :disabled="form.isHiddenValu">
            <el-radio-button label="TODAY">当天</el-radio-button>
            <el-radio-button label="YESTERDAY">昨天</el-radio-button>
            <el-radio-button label="DAY_LAST_MONTH">上月末</el-radio-button>
            <el-radio-button label="CUSTOM">自定义</el-radio-button>
          </el-radio-group>
        </el-form-item>
      </el-col>
      <!-- <el-col :span="12">
        <el-form-item v-if="form.transferType === 'ExpandNum'" label="载数方式" prop="dataTransferType">
          <el-radio-group v-model="form.dataTransferType" :disabled="form.isHiddenValu">
            <el-radio-button label="DataX">DataX</el-radio-button>
            <el-radio-button label="Jdbc">Jdbc</el-radio-button>
            <el-radio-button label="File">File</el-radio-button>
            <el-radio-button label="Flink">Flink</el-radio-button>
          </el-radio-group>
        </el-form-item>
      </el-col> -->
      <el-col v-if="form.tableSelectType === '导入'" :span="12">
        <el-form-item label="操作">
          <el-button
            style="float: left; margin-right: 5px"
            size="mini"
            :loading="downloadLoading"
            type="primary"
            icon="el-icon-download"
            @click="templateDownload"
          >
            模板下载
          </el-button>
          <el-upload
            ref="uploadExcel"
            style="display: inline-block"
            class="upload-demo"
            :loading="uploadLoading"
            action=""
            multiple
            :auto-upload="false"
            :on-change="handleUploadJobChange"
            :file-list="fileList"
            :show-file-list="false"
          >
            <div>
              <el-button
                style="float: left;"
                size="mini"
                type="primary"
                icon="el-icon-upload2"
              >
                文件上传
              </el-button>
            </div>
          </el-upload>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item v-if="form.dataSyncType === 'CUSTOM'" label="自定义日期" prop="customTime">
          <el-date-picker
            v-model="form.customTime"
            type="daterange"
            range-separator="至"
            start-placeholder="日期开始控件"
            end-placeholder="日期结束控件"
            value-format="yyyy-MM-dd"
          />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row style="margin-bottom: 10px">
      <el-col :span="3">
        <el-input v-model.trim="querySourceDatabaseName" placeholder="请输入源库名" clearable @keyup.enter.native="toQuery" />
      </el-col>
      <el-col :span="3" style="margin: 0 10px">
        <el-input v-model.trim="querySourceTableName" placeholder="请输入源表名" clearable @keyup.enter.native="toQuery" />
      </el-col>
      <el-col :span="3">
        <el-input v-model.trim="queryTargetDatabaseName" placeholder="请输入目标库名" clearable @keyup.enter.native="toQuery" />
      </el-col>
      <el-col :span="3" style="margin-left: 10px">
        <el-input v-model.trim="queryTargetTableName" placeholder="请输入目标表名" clearable @keyup.enter.native="toQuery" />
      </el-col>
      <el-button
        class="filter-item"
        size="mini"
        style="margin-left: 5px"
        type="success"
        icon="el-icon-search"
        @click="toQuery"
      >搜索
      </el-button>
      <el-button class="filter-item" size="mini" type="warning" icon="el-icon-refresh-left" @click="resetQuery">重置
      </el-button>
      <el-button class="filter-item" type="danger" icon="el-icon-delete" size="mini" :disabled="form.isHiddenValu || selectTestScriptName.length === 0" @click="removeTestScript">删除
      </el-button>
    </el-row>
    <el-table :data="form.tableList" border max-height="240" @selection-change="testScriptHandleSelectionChange">
      <el-table-column type="selection" width="55" />
      <el-table-column type="index" width="50" label="序号" />
      <el-table-column prop="sourceConnName" label="源服务器" />
      <el-table-column prop="sourceDatabaseName" label="源库名" />
      <el-table-column prop="sourceTableName" label="源表名" />
      <el-table-column prop="whereCondition" label="where条件">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="mini"
            :disabled="form.isHiddenValu"
            @click="editWhereCondition(scope.row.whereCondition, scope.$index)"
          >
            编辑
          </el-button>
        </template>
      </el-table-column>
      <el-table-column prop="targetConnName" label="目标服务器" />
      <el-table-column prop="targetDatabaseName" label="目标库名" />
      <el-table-column prop="targetTableName" label="目标表名" />
    </el-table>

    <el-dialog
      append-to-body
      :close-on-click-modal="false"
      :visible.sync="isSelectTableFlag"
      title="选择迁移数据表"
      width="1400px"
    >
      <div>
        <el-transfer
          v-if="isSelectTableFlag"
          v-model="selectTableList"
          filterable
          :titles="['待选-数据迁移清单', '已选-数据迁移清单']"
          :format="{ noChecked: '${total}', hasChecked: '${checked}/${total}'}"
          :props="{key: 'pkId', label: 'label'}"
          :data="tableList"
        >
          <span slot-scope="{ option }">
            <el-tooltip
              class="item"
              :content="option.label"
              placement="top"
            >
              <span>{{ option.label }}</span>
            </el-tooltip>
          </span>
        </el-transfer>
      </div>
      <div slot="footer" class="dialog-footer" style="display: flex; justify-content: center">
        <el-button type="primary" style="margin-right: 30px" @click="submitSelectScript">同意</el-button>
        <el-button @click="cancelSelectScript">取消</el-button>
      </div>
    </el-dialog>

    <!--where 条件填写弹窗-->
    <el-dialog
      append-to-body
      :close-on-click-modal="false"
      :before-close="sqlClose"
      :visible.sync="sqlFlag"
      title="sql语句"
      width="800px"
    >
      <el-form-item label="where条件">
        <el-input v-model="whereCondition" type="textarea" :rows="5" placeholder="请输入来源数据的where条件，如field1='A' AND field2='B'" style="width: 540px;" />
      </el-form-item>
      <div slot="footer" class="dialog-footer" style="text-align: center;">
        <el-button @click="sqlFlag=false">取消</el-button>
        <el-button type="primary" @click="sqlSubmit()">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import dataSourceConnApi from '@/api/metadata/dataSource'
import tableTransferListApi from '@/api/data/table/tableTransferList'
import dataTransferListApi from '@/api/data/transfer/dataTransferList'
import dataSourceApi from '@/api/metadata/dataSource'
import { downloadFile } from '@utils'
import { crunDate } from '@utils/data'
import CRUD from '@crud/crud'
import { upload } from '@/api/data'
import dataTransferTaskApi from '@/api/data/transfer/dataTransferTask'

export default {
  name: 'ScriptConvertList',
  model: {
    prop: 'form',
    event: 'changes'
  },
  props: {
    form: {
      required: true,
      type: Object
    },
    crud: {
      required: true,
      type: Object
    }
  },
  data() {
    return {
      binaryData: null,
      fileList: [],
      acceptFileType: '.xls,.xlsx',
      migrationTypeList: [],
      downloadLoading: false,
      isSelectTableFlag: false,
      selectTableList: [],
      tableList: [],
      currentTableList: [],
      tmpTableList: [],
      sourceConnList: [],
      textSourceConnList: [],
      sourceDatabaseList: [],
      queryName: null,
      querySourceDatabaseName: null,
      querySourceTableName: null,
      queryTargetDatabaseName: null,
      queryTargetTableName: null,
      selectTestScriptName: [],
      tempDataTransferTableList: [],
      whereCondition: '',
      whereConditionIndex: null,
      sqlFlag: false,
      loading: false,
      uploadLoading: false
    }
  },
  created() {
    this.initData()
  },
  methods: {
    async initData() {
      this.initMigrationTypeList()
      const param = { size: 500, status: 'ENABLE' }
      dataSourceConnApi.findListByPage(param).then(data => {
        this.textSourceConnList = data.content.filter(item => item.sourceType === 'TEXT')
      }).catch(() => {
        this.crud.notify('获取文本类型服务器失败！', 'error')
      })
      if (!this.form.pkId) {
        this.form.taskName = `数据迁移-${crunDate()}`
        const data = await dataSourceApi.findDefaultSource()
        const sourceDefault = data.find(item => item.isDefault === 'ENABLE' && item.sourceAttribute === 'source')
        const targetDefault = data.find(item => item.isDefault === 'ENABLE' && item.sourceAttribute === 'target')

        const migrationType = (sourceDefault === undefined ? '' : sourceDefault.sourceType) + '-' + (targetDefault === undefined ? '' : targetDefault.sourceType)
        if (this.migrationTypeList.some(item => item.name === migrationType && item.enabled === true)) {
          this.form.migrationType = migrationType
          this.changeMigrationType(this.form.migrationType)
          this.form.sourceConnPkId = sourceDefault === undefined ? '' : sourceDefault.pkId
          this.form.targetConnPkId = targetDefault === undefined ? '' : targetDefault.pkId
        }
      } else {
        this.changeMigrationType(this.form.migrationType)
      }
      await this.dataSourceConnChange(this.form.sourceConnPkId)
    },
    changeMigrationType(val) {
      const sourceTypes = val.split('-')
      this.initSourceConnList(sourceTypes[0])
      // this.initTargetConnList(sourceTypes[1])
      this.form.database = ''
    },
    // 获取数据源信息
    initSourceConnList(sourceType) {
      const params = { serverType: 'SOURCE', status: 'ENABLE', sourceType: sourceType, size: 10000 }
      dataSourceApi.findListByPage(params).then(res => {
        if (res.total > 0) {
          this.sourceConnList = res.content
        }
      })
    },
    initTargetConnList(targetType) {
      const params = { serverType: 'TARGET', sourceType: targetType, size: 10000 }
      dataSourceApi.findListByPage(params).then(res => {
        if (res.total > 0) {
          this.targetConnList = res.content
        }
      })
    },
    initMigrationTypeList() {
      dataTransferTaskApi.getMigrationTypeInfos().then(res => {
        this.migrationTypeList = res
      })
    },
    dataSourceConnChange(sourceConnPkId) {
      this.form.database = ''
      this.sourceDatabaseList = ''
      if (sourceConnPkId) {
        dataSourceConnApi.schemas(sourceConnPkId).then(res => {
          this.sourceDatabaseList = res
        }).catch(err => {
          console.log(err)
        })
      }
    },
    showScripList() {
      this.loading = true
      this.resetQuery()
      this.findLatestSuccess()
    },
    showAllTableList() {
      this.loading = true
      this.resetQuery()
      this.storeAllTables()
    },
    findLatestSuccess() {
      if (this.form.database) {
        const param = {
          size: 100000,
          status: 'SUCCESS',
          sourceConnPkId: this.form.sourceConnPkId,
          sourceDbName: this.form.database
        }
        tableTransferListApi.findLatestSuccess(param).then(data => {
          this.loading = false
          this.tableList = []
          if (data.total > 0) {
            this.tmpTableList = data.content
            data.content.forEach(item => {
              const sourceTableName = item.sourceDbName + '.' + item.sourceTableName
              const targetTableName = item.targetDbName + '.' + item.targetTableName
              const label = sourceTableName + ' -> ' + targetTableName
              this.tableList.push({ pkId: item.pkId, label: label })
            })
          }
          this.initselectTableList()
        }).catch((err) => {
          this.loading = false
          console.log(err)
        })
      } else {
        this.loading = false
        this.$notify({
          title: '请选择数据库名称',
          type: 'warning',
          duration: 2500
        })
      }
    },
    storeAllTables() {
      const param = {
        pkId: this.form.sourceConnPkId,
        schema: this.form.database
      }
      dataSourceApi.tables(param).then(data => {
        this.loading = false
        this.tableList = []
        if (data && data.length > 0) {
          for (let i = 0; i < data.length; i++) {
            this.tableList.push({ pkId: i, label: data[i] })
          }
        }
        this.initselectTableList()
      }).catch(err => {
        this.loading = false
        console.log(err)
      })
    },
    initselectTableList() {
      this.selectTableList = []
      if (this.form.transferType === 'ExpandNum') {
        this.tableList.forEach(item => {
          this.form.tableList.forEach(item2 => {
            if (item2.tableTransferListPkId === item.pkId) {
              this.selectTableList.push(item.pkId)
            }
          })
        })
      } else {
        this.tableList.forEach(item => {
          this.form.tableList.forEach(item2 => {
            if (item2.sourceTableName === item.label) {
              this.selectTableList.push(item.pkId)
            }
          })
        })
      }
      this.isSelectTableFlag = true
    },
    toQuery() {
      if (this.querySourceDatabaseName !== undefined && this.querySourceDatabaseName !== null && this.querySourceDatabaseName !== '') {
        this.tempDataTransferTableList = JSON.parse(JSON.stringify(this.form.tableList))
        this.form.tableList = this.form.tableList.filter((item) => {
          return item.sourceDatabaseName.toUpperCase().includes(this.querySourceDatabaseName.toUpperCase())
        })
      } else if (this.querySourceTableName !== undefined && this.querySourceTableName !== null && this.querySourceTableName !== '') {
        this.tempDataTransferTableList = JSON.parse(JSON.stringify(this.form.tableList))
        this.form.tableList = this.form.tableList.filter((item) => {
          return item.sourceTableName.toUpperCase().includes(this.querySourceTableName.toUpperCase())
        })
      } else if (this.queryTargetDatabaseName !== undefined && this.queryTargetDatabaseName !== null && this.queryTargetDatabaseName !== '') {
        this.tempDataTransferTableList = JSON.parse(JSON.stringify(this.form.tableList))
        this.form.tableList = this.form.tableList.filter((item) => {
          return item.targetDatabaseName.toUpperCase().includes(this.queryTargetDatabaseName.toUpperCase())
        })
      } else if (this.queryTargetTableName !== undefined && this.queryTargetTableName !== null && this.queryTargetTableName !== '') {
        this.tempDataTransferTableList = JSON.parse(JSON.stringify(this.form.tableList))
        this.form.tableList = this.form.tableList.filter((item) => {
          return item.targetTableName.toUpperCase().includes(this.queryTargetTableName.toUpperCase())
        })
      } else {
        this.resetQuery()
      }
    },
    resetQuery() {
      this.querySourceDatabaseName = null
      this.querySourceTableName = null
      this.queryTargetDatabaseName = null
      this.queryTargetTableName = null
      if (this.tempDataTransferTableList !== undefined && this.tempDataTransferTableList.length > 0) {
        this.form.tableList = JSON.parse(JSON.stringify(this.tempDataTransferTableList))
        this.tempDataTransferTableList = []
      }
    },
    // 记录选择的测试脚本
    testScriptHandleSelectionChange(val) {
      this.selectTestScriptName = []
      val.forEach(item => {
        this.selectTestScriptName.push(item.tableTransferListPkId)
      })
    },
    // 删除测试脚本
    removeTestScript() {
      this.selectTestScriptName.forEach(removeId => {
        this.form.tableList.forEach((item, index) => {
          if (removeId === item.tableTransferListPkId) {
            this.form.tableList.splice(index, 1)
          }
        })
        this.selectTableList.forEach((id, index) => {
          if (removeId === id) {
            this.selectTableList.splice(index, 1)
          }
        })
      })
    },
    cancelSelectScript() {
      this.isSelectTableFlag = false
      this.selectTableList = []
    },
    submitSelectScript() {
      this.isSelectTableFlag = false
      this.form.tableList = this.form.tableList.filter(tableInfo => this.selectTableList.includes(tableInfo.tableTransferListPkId))
      this.selectTableList = this.selectTableList.filter(selectInfo => this.form.tableList.find(tableInfo => tableInfo.tableTransferListPkId === selectInfo) === undefined)
      if (this.form.transferType === 'ExpandNum') {
        this.tableList.forEach(item => {
          if (this.selectTableList.includes(item.pkId)) {
            const tableInfo = this.getSelectTableInfoById(item.pkId)
            const data = {
              ...tableInfo,
              pkId: null,
              dataTransferTaskPkId: null,
              tableTransferListPkId: tableInfo.pkId,
              targetDatabaseName: tableInfo.targetDbName,
              sourceDatabaseName: tableInfo.sourceDbName
            }
            this.form.tableList.push(data)
          }
        })
      } else if (this.form.transferType === 'TextLoad') {
        this.tableList.forEach((item, index) => {
          let sourceConnName
          let targetConnName
          if (this.selectTableList.includes(index)) {
            this.sourceConnList.forEach(item => {
              if (item.pkId === this.form.textSourceConnPkId) {
                // 源数据源连接名称从Text对应ID获取
                sourceConnName = item.sourceName
              }
              if (item.pkId === this.form.sourceConnPkId) {
                targetConnName = item.sourceName
              }
            })
            const data2 = {
              pkId: null,
              dataTransferTaskPkId: null,
              tableTransferListPkId: null,
              sourceConnPkId: this.form.textSourceConnPkId,
              sourceConnName: sourceConnName,
              sourceDatabaseName: this.form.database,
              sourceTableName: item.label,
              targetConnPkId: this.form.sourceConnPkId,
              targetConnName: targetConnName,
              targetDatabaseName: this.form.database,
              targetTableName: item.label
            }
            this.form.tableList.push(data2)
          }
        })
      } else if (this.form.transferType === 'UnloadText') {
        this.tableList.forEach((item, index) => {
          let sourceConnName
          let targetConnName
          if (this.selectTableList.includes(index)) {
            this.sourceConnList.forEach(item => {
              if (item.pkId === this.form.sourceConnPkId) {
                sourceConnName = item.sourceName
              }
              if (item.pkId === this.form.textSourceConnPkId) {
                // 目标数据源连接名称从Text对应ID获取
                targetConnName = item.sourceName
              }
            })
            const data2 = {
              pkId: null,
              dataTransferTaskPkId: null,
              tableTransferListPkId: null,
              sourceConnPkId: this.form.sourceConnPkId,
              sourceConnName: sourceConnName,
              sourceDatabaseName: this.form.database,
              sourceTableName: item.label,
              targetConnPkId: this.form.textSourceConnPkId,
              targetConnName: targetConnName,
              targetDatabaseName: this.form.database,
              targetTableName: item.label
            }
            this.form.tableList.push(data2)
          }
        })
      } else {
        this.tableList.forEach((item, index) => {
          let sourceConnName
          if (this.selectTableList.includes(index)) {
            this.sourceConnList.forEach(item => {
              if (item.pkId === this.form.sourceConnPkId) {
                sourceConnName = item.sourceName
              }
            })
            const data2 = {
              pkId: null,
              dataTransferTaskPkId: null,
              tableTransferListPkId: index,
              sourceConnPkId: this.form.sourceConnPkId,
              sourceConnName,
              sourceDatabaseName: this.form.database,
              sourceTableName: item.label,
              targetConnPkId: null,
              targetConnName: null,
              targetDatabaseName: null,
              targetTableName: null
            }
            this.form.tableList.push(data2)
          }
        })
      }
    },
    getSelectTableInfoById(pkId) {
      let tableInfo = null
      this.tmpTableList.forEach(item => {
        if (item.pkId === pkId) {
          tableInfo = item
        }
      })
      return tableInfo
    },
    // where条件修改提交
    sqlSubmit() {
      this.form.tableList[this.whereConditionIndex].whereCondition = this.whereCondition
      this.sqlFlag = false
    },
    // 编辑where条件
    editWhereCondition(whereCondition, index) {
      this.whereCondition = this.form.tableList[index].whereCondition
      this.whereConditionIndex = index
      this.sqlFlag = true
    },
    // where 条件修改关闭
    sqlClose() {
      this.sqlFlag = false
    },
    // 切换数据迁移方式展示页面
    tranferTypeChange() {
      [this.form.tableList, this.currentTableList] = [this.currentTableList, this.form.tableList]
    },
    // 文件上传操作
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      )
    },
    // 移除所上传文件
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`)
    },
    templateDownload() {
      const pkIds = this.crud.selections.map(item => {
        return item.pkId
      })
      this.downloadLoading = true
      dataTransferListApi.download(pkIds)
        .then(result => {
          downloadFile(result, '数据迁移清单', 'xlsx')
          this.downloadLoading = false
        }).catch(() => {
          this.downloadLoading = false
        })
    },
    handleUploadJobChange(file, fileList) {
      const fileName = file.name.substring(file.name.lastIndexOf('.') + 1)
      if (fileName !== 'xlsx' && fileName !== 'xls') {
        this.crud.notify('文件类型应为excel文件!', CRUD.NOTIFICATION_TYPE.ERROR)
        this.fileList = []
        return false
      }
      this.fileList = fileList
      if (this.fileList.length > 0) {
        this.uploadLoading = true
        const formData = new FormData()
        this.fileList.forEach((element, i) => {
          formData.append('file', element.raw)
        })
        upload('/api/data/transfer/list/importDataTransfer', formData).then(res => {
          this.$refs.uploadExcel.clearFiles()
          this.uploadLoading = false
          if (res.length) {
            this.form.tableList = res.filter(item => item.excelHandleStatus)
            this.crud.notify('导入成功!', CRUD.NOTIFICATION_TYPE.SUCCESS)
            this.crud.refresh()
          } else {
            this.crud.notify('导入失败!', CRUD.NOTIFICATION_TYPE.ERROR)
          }
        })
      } else {
        this.$notify.error({
          title: '错误',
          message: '请选择导入的文件!'
        })
      }
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
::v-deep .el-transfer-panel {
  width: 600px !important;
}

::v-deep .bordered-button {
  border: #92dab3 2px;
}

::v-deep .el-transfer__buttons button {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

::v-deep .el-transfer__buttons button:last-child {
  margin-left: 0px;
}
</style>
